<template>
  <a-modal
    width="90vw"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden', top: '0px' }"
  >
    <template #title>
      <modalTitle @close="modalShow = false" :title="props.gwjfData.community_name"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="top">
        <div class="top_item" :class="type === 1 ? 'top_item_active' : ''" @click="isSolveChange(1)">
          <div class="top_item_name">危旧房屋统计</div>
        </div>
        <div class="top_item" :class="type === 2 ? 'top_item_active' : ''" @click="isSolveChange(2)" style="margin: 0 10px">
          <div class="top_item_name">临水临崖自建房统计</div>
        </div>
      </div>
      <div class="center" @wheel.prevent="handleWheel" ref="scrollContainer">
        <img :src="props.gwjfData.lslytj_image" alt="" class="center_img2" v-if="type === 1" />
        <img :src="props.gwjfData.wjfwxctj_image" alt="" class="center_img2" v-if="type === 2" />
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref, defineProps } from "vue"
import modalTitle from "../modalTitle.vue"
const modalShow = ref(false)
const props = defineProps({
  gwjfData: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(["rowClick"])

const close = () => {
  modalShow.value = false
}
const isSolveChange = (e) => {
  type.value = e
}
const type = ref(1)
const show = () => {
  modalShow.value = true
}

const scrollContainer = ref(null)

const handleWheel = (e) => {
  scrollContainer.value.scrollLeft += e.deltaY * 0.5
}

defineExpose({ show, close })
</script>
<style scoped lang="less">
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .top_item_active {
    border: 2px solid #1e6579;
  }

  .top_item {
    flex: 1;
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);

    // border: 1px solid;
    // border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);
    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
    }

    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }

    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}

.center {
  width: 100%;
  height: 700px;
  overflow: hidden;
  overflow-x: auto;
  box-sizing: border-box;
  position: relative;

  .center_img {
    position: absolute;
    width: 690px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .center_img1 {
    position: absolute;
    width: 116px;
    height: 332px;
    right: 65px;
    bottom: 68px;
  }

  .center_img2 {
    position: absolute;
    width: 1600px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
